<template>
    <div class="left">
        <div class="card"> 
            <div class="card_title"><i></i>全国台站总览<i class="more_icon"></i></div>
            <div class="card_body">
                <div class="flex top_card">
                    <img src="~@static/img/Group_3652.png" alt="">
                    <div>
                        <p class="data_text"><span>17</span><span>个</span></p>
                        <p>台站数据</p>
                    </div>
                </div>
                <div class="flex bottom_card">
                    <div class="flex top_card" v-for="(item,index) in card1BottomList" :key="index">
                        <img :src="item.img" alt="">
                        <div>
                            <p>{{ item.name }}</p>
                            <p><span>{{ item.number }}</span><span>{{ item.unit }}</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card2 card">
            <div class="card_title"><i></i>全国监测站数据动态</div>
            <div>
                <div class="qygk_center">数据动态</div>
                <div class="card_group">
                    <div class="card_item" v-for="(item,index) in qygkList" :key="index">
                        <img :src="item.img" alt="">
                        <div class="item_text">
                            <div>{{ item.name }}</div>
                            <div><span class="blue">{{ item.number }}</span>{{ item.unit }}<span class="blue">{{ item.val }}</span>{{ item.unit2|| ""  }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card left_card3">
            <div>
                <div class="card_title"><i></i>全国监测数据量占比</div>
                <div class="left_card3_menu">
                    <div v-for="(item,index) in monitoringData" :key="index" :class="{'active_bgColor': monitoringActive === item}" @click="changeMonitoringData(item)"><span class="f_color">{{ item }}</span></div>
                </div>
                <div id="csjzb" class="pie_chart_leftbox"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{ 
            monitoringData: ["全部占比", "地下水位数据", "土壤数据", "气象数据", "生物数据"],
            monitoringActive: "全部占比",
            card1BottomList: [
                { img: require("../../../static/img/样地数量.png"), name: "样地数量", number: "58", unit: "个" }, 
                { img: require("../../../static/img/数据总量.png"), name: "数据总量", number: "88", unit: "个" }, 
                { img: require("../../../static/img/监控总数.png"), name: "监控总数", number: "58", unit: "个" }, 
                { img: require("../../../static/img/设备总数.png"), name: "设备总数", number: "23", unit: "个" }, 
            ],
            qygkList: [
                {img: require("../../../static/img/总面积.png"), name: "耕地质量", number: "****",unit: "条"},
                {img: require("../../../static/img/自然保护区.png"), name: "水盐动态", number: "****",unit: "条"},
                {},
                {},
                {},
                {},
                // {img: require("../../../static/img/植被.png"), name: "数据正常", number: "****", unit: "条"},
                // {img: require("../../../static/img/非自然保护区.png"), name: "数据异常", number: "****", unit: "条"},
                {img: require("../../../static/img/非植被.png"), name: "土壤性状", number: "****", unit: "条"},
                {img: require("../../../static/img/人为活动区.png"), name: "作物长势", number: "****", unit: "条"},
            ],
        }
    },

    mounted() { 
        let title = [
            { top: "35%",left: "19%", text: '100%', textStyle: { fontSize:12, fontWeight:'normal', color: '#8E9299' }, },
            { top: "45%", left: "19%", subtext: '****', subtextStyle: { color: '#fff', fontWeight: 'bold', fontSize: 18 }, },
        ] 
        let dataList2 = [ 
            { name: '水分', value: 14}, 
            { name: '土壤', value: 38}, 
            { name: '气象', value: 36}, 
            { name: '生物', value: 48},  
        ]
        let color2 = ['#00C2CE', '#ECC94B', '#F56565', '#ED64A6', '#9F7AEA', '#667EEA', '#0B7AE1']
        this.initPie(dataList2,"csjzb",title,color2);
    },

    methods: { 
        initPie(dataList,id,title,color){
            let _this = this;
            var chartDom = document.getElementById(id);
            var chart = _this.$echarts.init(chartDom);
            chart.clear();
            chart.resize();  
            var data = [];
            var legenddata = [];
            for (var i = 0; i < dataList.length; i++) {
                data.push({
                    value: dataList[i].value,
                    val: dataList[i].val? dataList[i].val : 0,
                    name: dataList[i].name,
                    itemStyle: {
                        normal: {
                            borderWidth: 0,
                            // shadowBlur: 0,
                            // borderColor: color[i],
                            // shadowColor: color[i]
                        }
                    }
                });
                legenddata.push(dataList[i].name);
            }
            var seriesOption = [{
                name: '',
                type: 'pie',
                clockWise: false,
                radius: [50, 68], 
                center: ["26%", "50%"],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: false, 
                        }, 
                    }
                },
                data: data
            }];
            var option = { 
                color: color,  
                title: title || "",
                tooltip: {
                    show: false
                },
                legend: { 
                    itemHeight: 6,
                    itemWidth: 8,
                    orient: 'vertical', 
                    right: '8%',
                    y: "center", 
                    data: legenddata,
                    bottom: 150,
                    align: 'left',
                    textStyle: {
                        color: "#fff", 
                        "fontSize": 12,
                        rich:{
                            a:{
                                color: "#ffffff60", 
                            }
                        }, 
                    },
                    itemGap: 10,
                    formatter: function (params) {
                        var target = ''; 
                        var value; 
                        for (var i = 0, l = data.length; i < l; i++) { 
                            if (data[i].name == params) {
                                target = data[i].val? data[i].val : "";  
                                value = data[i].value;   
                            }
                        }  
                        var arr = ['{a|' + params + '}' +'  ' + value + ' ' +"%" +'   '+ '{a|' + target + '}' + ' ' +""];
                        return arr.join("\n");
                        
                    }
                },
                toolbox: {
                    show: false
                },
                series: seriesOption
            }
            chart.setOption(option);
        },
    }
}
</script>

<style lang="scss" scoped> 
@import "@/assets/styles/overView.scss";  
.left{
    z-index: 11;
}
.card_body{
    padding: 10px 24px;
}
.top_card{ 
    >img{
        width: 86px;
        height: 78px;
    }
    >div{
        margin-left: 16px;
        >p{
            color: #fff;
            
        }
    }
}

.data_text{
    >span{
        text-shadow: 0 0 4px #29E3FC92;
    }
    >span:nth-child(1){
        font-size: 32px;
    }
    >span:nth-child(2){
        font-size: 14px;
    }
}

.bottom_card{
    flex-wrap: wrap;
    >div{
        width: 50%;
        margin-top: 10px;
    }
    .top_card{
        >img{
            width: 50px;
            height: 50px; 
        }
        >div{
            >p:nth-child(2){
                >span:nth-child(1){
                    font-size: 22px;
                    margin-right: 10px;
                    font-family: "siyuanHeavy";
                }
                >span:nth-child(2){
                    color: #FFFFFF64;
                    font-size: 12px;
                }
            }
        }
    }
}

.left_card3{
    height: calc(100% - 560px); 
    >div{height: 100%;}
    .left_card3_menu{
        padding: 10px 20px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);  
        grid-template-rows: repeat(2, auto);  
        gap: 6px 10px; 
        >div{ 
            height: 32px;
            background-color: #2D4A6F80;
            border-radius: 64px;
            border: 1px solid #FFFFFF10; 
            text-align: center;
            line-height: 32px;
            font-size: 14px;
            cursor: pointer;
            &:hover{
                background-color: #4181D1 !important;
            }
        }
        .active_bgColor{
            background-color: #4181D1 !important;
        }
        .f_color{ 
            background-image: linear-gradient(to bottom, #ffffff, 90%, #C8F2FE);  
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
            color: transparent; 
        }
    } 
} 


.pie_chart_leftbox{ 
    height: calc(100% - 120px); 
}

.card3_r_body{
    height: calc(100% - 30px);
    #echarts_3{
        height: 60%;
        width: 100%;
    }
    .flex_a{
        display: flex;
        height: 40%;
        >div{
            width: 33%;
            height: 100%;
        }
    }
}
 
.echarts_box1{
    width: 100%;
    height: 180px;
    padding: 14px 0;
    box-sizing: border-box;
    
}
  
.echarts_box2{
    width: 100%;
    height: calc(100% - 586px);
    padding: 14px 0;
    box-sizing: border-box;
}
 
#echarts_7{
    width: 100%;
    height: 154px;
}

</style>